<template>
  <div class="resource-library">
    <div class="title">英语视听说资源共有 74796 个资源，包含：</div>
    <ul class="list flex-row">
      <li class="item flex-row" v-for="(item1, index1) of list.totalList" :key="index1">
        <img class="icons" :src="require(`@/assets/images/resource-icons/${iconsList[item1.resourceName]}.png`)" />
        <div class="item-name flex-col">
          <p class="name">{{ item1.resourceName }}</p>
          <p class="num">{{ item1.resourceNum }}</p>
        </div>
      </li>
    </ul>
    <div class="title">文件资源</div>
    <ul class="list flex-row">
      <li class="item flex-row" v-for="(item2, index2) of list.fileList" :key="index2">
        <img class="icons" :src="require(`@/assets/images/resource-icons/${iconsList[item2.resourceName]}.png`)" />
        <div class="item-name flex-col">
          <p class="name">{{ item2.resourceName }}</p>
          <p class="num">{{ item2.resourceNum }}</p>
        </div>
      </li>
    </ul>
    <div class="title">题目资源</div>
    <ul class="list flex-row">
      <li class="item flex-row" v-for="(item3, index3) of list.subjectList" :key="index3">
        <img class="icons" :src="require(`@/assets/images/resource-icons/${iconsList[item3.resourceName]}.png`)" />
        <div class="item-name flex-col">
          <p class="name">{{ item3.resourceName }}</p>
          <p class="num">{{ item3.resourceNum }}</p>
        </div>
      </li>
    </ul>
    <div class="title">实践资源</div>
    <ul class="list flex-row">
      <li class="item flex-row" v-for="(item4, index4) of list.trainList" :key="index4">
        <img class="icons" :src="require(`@/assets/images/resource-icons/${iconsList[item4.resourceName]}.png`)" />
        <div class="item-name flex-col">
          <p class="name">{{ item4.resourceName }}</p>
          <p class="num">{{ item4.resourceNum }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {
  reportResource
} from '@/api/teacher/manage/resource'

export default {
  name: 'index',
  data () {
    return {
      list: [],
      iconsList: {
        '文件资源': 'gl_wjzy@2x',
        '题目资源': 'gl_tmzy@2x',
        '实践资源': 'gl_sjzy@2x',
        '文本资源': 'gl_wbzy@2x',
        '图像资源': 'gl_txzy@2x',
        '音频资源': 'gl_ypzy@2x',
        '视频资源': 'gl_spzy@2x',
        '单选题': 'gl_dxt@2x(1)',
        '多选题': 'gl_dxt@2x',
        '判断题': 'gl_pdt@2x',
        '翻译题': 'gl_fyt@2x',
        '填空题': 'gl_tkt@2x',
        '文字排序题': 'gl_pxt@2x',
        '连线题': 'gl_lxt@2x',
        '写作题': 'gl_fyt@2x',
        '听力题': 'gl_tkt@2x',
        '口语题': 'gl_pxt@2x',
        '实践训练': 'gl_sjxl@2x',
        '听力训练': 'gl_tlxl@2x',
        '口语训练': 'gl_kyxl@2x',
        '案例分析': 'gl_alfx@2x',
        '互动实训': 'gl_hdsx@2x',
        '综合案例': 'gl_zhal@2x'
      }
    }
  },
  components: {
  },
  mounted () {
    this.reportResource()
  },
  methods: {
    // 获取班级列表
    async reportResource () {
      const res = await reportResource()
      if (res.code === '200') {
        this.list = res.data
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.resource-library {
  height: auto;
  background:rgba(255,255,255,1);
  border:1px solid rgba(229,229,229,1);
  border-radius:0px 0px 5px 5px;
  padding: 0 30px 30px 30px;
  .title {
    padding: 30px 0;
    font-size:20px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(16,29,55,1);
  }
  .list {
    justify-content: flex-start;
    border-bottom: 1px dashed #E5E5E5;
    flex-wrap: wrap;
    .item {
      margin-right: 70px;
      margin-bottom: 30px;
      .icons {
        width: 52px;
        height: 52px;
        margin-right: 11px;
      }
      .item-name {
        height: 52px;
        .name {
          font-size: 14px;
          color: #101D37;
        }
        .num {
          color: #101D37;
          font-size: 26px !important;
        }
      }
    }
  }
}
</style>
